<template>
  <div>
    <div>导航故障页面</div>
    <a-button type="primary" @click="callBack">跳转到当前页面</a-button>
  </div>
</template>

<script>
import { NavigationFailureType, isNavigationFailure } from "vue-router";
export default {
  methods: {
    async callBack() {
      let failure = await this.$router.push("/NavigationFailures");
      /**
       * aborted：在导航守卫中返回 false 中断了本次导航。
       * cancelled： 在当前导航还没有完成之前又有了一个新的导航。比如，在等待导航守卫的过程中又调用了 router.push。
       * duplicated：导航被阻止，因为我们已经在目标位置了。
       */
      if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
        alert("You have unsaved changes, discard and leave anyway?");
      }
    },
  },
};
</script>

<style scoped></style>
